@import url(style.css);

@import url(mobile.css);

@import url(custom.css);

@import url(pscroll.css);

@import url(app.css);

@import url(map.css);



/*网站body反色页面黑白包含多款浏览器*/

/*html { */

/*    -webkit-filter: grayscale(100%); */

/*    -moz-filter: grayscale(100%); */

/*    -ms-filter: grayscale(100%); */

/*    -o-filter: grayscale(100%); */

/*    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  */

/*    _filter:none; */

/*} */

/*全部图片标签反色黑白处理支持Chrome, Safari, Opera浏览器*/

/*img {*/

/*    -webkit-filter: grayscale(100%); */

/*    filter: grayscale(100%);*/

/*}*/



/*轮显*/

.banner_page{ position:absolute; width:110px; text-align:center; left:50%; margin-left:-881px; color:rgba(255,255,255,0.81); font-size:15px; z-index:10; bottom:25px; line-height:40px; z-index:5; /*font-style:italic;*/transition:all 0.3s; font-family:PingFang SC Medium; letter-spacing:2px;}

.banner_page .current{ font-size:40px; color:#fff;}

.banner_tit{position:absolute;left:50%; margin-left:-881px; color:#fff; font-size:18px;  bottom:140px; line-height:30px; letter-spacing:4px;}

.main .banner .swiper-button-next{ position:relative; right:0;}

/*产品中心*/

.i_title{ text-align:center; margin-top:6%; overflow:hidden;}

.i_title .h3{ font-weight:bold; color:#222222; overflow:hidden; line-height:1.3;}

.i_title span{ display:block; line-height:1.1;overflow:hidden; color:#222; text-transform:uppercase; font-family:Arial; font-weight:bold; letter-spacing:-2px;}

.i_title span em{ font-style:normal; color:#0097ff;}

.i_title .p{ overflow:hidden; line-height:1.3; margin-top:1.5%; color:#999; font-size:16px;}

.i_one{ overflow:hidden; background:#eeeeee;}

.i_one .i_one_ul{ margin-top:4%; padding-bottom:6%;}

.i_one .i_one_ul.bgs2{ padding-bottom:0;}

.i_one .i_one_ul li{ float:left; width:49%; }

.i_one .i_one_ul li:nth-child(2n+0){ float:right;}

.i_one .i_one_ul li .boxs2{ background:#fff;box-shadow: 2px 2px 25px rgba(0,0,0,0.05); padding-bottom:52px;  overflow:hidden; margin-bottom:4%; padding-top:45px;transition:all 0.3s; height:411px;}

.i_one .i_one_ul li .boxs2:hover{box-shadow: 2px 2px 25px rgba(0,0,0,0.1);}

.i_one .i_one_ul li .boxs2 .txts{ position:absolute; max-width:274px; left:0; top:0;}

.i_one .i_one_ul li .boxs2 .imgs{ float:right; position:relative; padding-top:48.28%; margin-top:34px; transition:all 0.3s; width:60%;}

.i_one .i_one_ul li .boxs2 .imgs img{ display: block;width: 100%; height:100%; position:absolute; top:0; left:0;-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);-webkit-transition:all 0.6s ease-out 0s; -moz-transition:all 0.6s ease-out 0s; -o-transition:all 0.6s ease-out 0s; transition:all 0.6s ease-out 0s; /*-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;*/}

.i_one .i_one_ul li .boxs2:hover .imgs{transform: translate(0, -10px);}

.i_one .i_one_ul li .boxs2:hover .imgs img{-webkit-transform:scale(1.1, 1.1); -moz-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1);/*-webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%);-o-filter: grayscale(0%); filter: grayscale(0%); filter:none;*/}

.i_one .i_one_ul li .boxs2 .boxs{ margin:0 auto; position:relative;width:94%; max-width:580px;}

.i_one .i_one_ul li .boxs2 .label{ display:block; text-align:left; height:22px; line-height:22px; color:#999999;  font-size:16px;transition:all 0.3s;}

.i_one .i_one_ul li .boxs2 .h3{ font-weight:bold; height:40px; line-height:40px; margin-top:46px; overflow:hidden; color:#222222;  transition:all 0.3s;white-space:nowrap;text-overflow:ellipsis;}

.i_one .i_one_ul li .boxs2:hover .h3{ color:#0097ff;  }

.i_one .i_one_ul li .boxs2 .h4{ font-weight:bold; height:32px; line-height:32px; margin-top:5px; overflow:hidden; color:#222222;  transition:all 0.3s;white-space:nowrap;text-overflow:ellipsis;}

.i_one .i_one_ul li .boxs2 .h4 span{ color:#bcbcbc; margin-left:5px; margin-right:5px; display:inline-block; vertical-align:middle; font-weight:normal;font-size:12px;font-family: Arial;}

.i_one .i_one_ul li .boxs2 .p{ display:block;  height:22px; line-height:22px; color:#222222;font-size:16px; margin-top:5px;white-space:nowrap;text-overflow:ellipsis; overflow:hidden;}

.i_one .i_one_ul li .boxs2 .i_more{ margin-top:90px; }



.i_more{ display:block; width:199px; height:48px; line-height:48px; overflow:hidden;  background:url(../image/i_bg1.png) no-repeat; background-size:100% 100%; font-style:normal; }

/*.btn-skip span{vertical-align: top;color:#fff; font-size:15px; display:inline-block;text-indent:27px;-webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;-webkit-transition: all .3s; transition: all .3s;}

/*.btn-skip{

	&,

	*{

		-webkit-box-sizing: border-box;

		-moz-box-sizing: border-box;

		box-sizing: border-box;

		&::before,&::after{

		-webkit-box-sizing: border-box;

		-moz-box-sizing: border-box;

		box-sizing: border-box;

		}

  	}

}

*/

/*四大基地*/

.i_two{ overflow:hidden;background-attachment: fixed; background-repeat: no-repeat;  background-position: center center; background-size: cover;text-align:center;}

.i_two .wrap{ margin-bottom:266px; padding-top:1%;}

.i_two .i_title .h3{color:#fff;}

.i_two .i_title span{ color:#fff;}

.i_two .i_title .p{ color:#fff;}

.i_two_2{ position:relative;}

.i_two_ul{ margin-top:-204px;}

.i_two_ul li{ float:left; width:50%; overflow:hidden;transition:all 0.3s; background:#fff;}

.i_two_ul li:nth-child(2),.i_two_ul li:nth-child(3){ background:#f0f0f0;}

.i_two_ul li:hover{box-shadow: 2px 5px 25px rgba(0,0,0,0.1);}

.i_two_ul li .boxs{ padding:30px; overflow:hidden;}

.i_two_ul li .imgs{ float:left; position:relative;/* padding-top:22.5%;*/ padding-top:144px;  transition:all 0.3s; width:205px; margin-right:5%; overflow:hidden;}

.i_two_ul li .imgs img{ display: block;width: 100%; height:100%; position:absolute; top:0; left:0;-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);-webkit-transition:all 0.6s ease-out 0s; -moz-transition:all 0.6s ease-out 0s; -o-transition:all 0.6s ease-out 0s; transition:all 0.6s ease-out 0s; /*-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;*/}

.i_two_ul li:hover .imgs img{-webkit-transform:scale(1.1, 1.1); -moz-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1);/*-webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%);-o-filter: grayscale(0%); filter: grayscale(0%); filter:none;*/}

.i_two_ul li .txts{ overflow:hidden;}

.i_two_ul li .h3{ font-weight:bold; height:36px; line-height:36px; margin-top:18px; overflow:hidden; color:#333;  transition:all 0.3s;white-space:nowrap;text-overflow:ellipsis;}

.i_two_ul li:hover .h3{ color:#366091;  }

.i_two_ul li .p{ overflow:hidden; line-height:28px; height:56px;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top:15px; color:#999999; font-size:16px;}

/*服务网络*/

.i_three{ overflow:hidden; }

.i_three .wrap{ padding-top:6%; padding-bottom:6%;position:relative;}

.i_three_r{ float:right; width:88%; overflow:hidden; position:relative;}

.i_three_r .maps{ width:100%;}

.i_three_r .maps#maps2{ display:none;}

.i_three_r .i_three_map{ position:absolute; width:100%; height:100%; top:0; left:0;}

.i_three_l{ position:absolute; left:0; top:0; height:100%; width:40%; overflow:hidden;display: flex; align-items: center; justify-content: left; z-index:1;}

.i_three_l .boxs{ overflow:hidden; width:100%;}

.i_three_l .i_title{ text-align:left; margin-top:0;}

.i_three_l .i_title .h3{ margin-top:1%;}

.i_three_l .i_title .p{ color:#555555; line-height:1.8; margin-top:5%; max-width:460px;}

.i_three_l .i_more{ margin-top:14%;}

/*目标*/

#c-about{position: relative;}

#c-about .c-main-wrap { position: relative;height: 100vh;}

#c-about .c-main-wrap.on .c-wrap{padding: 0;}

#c-about .c-main-wrap.on .c-wrap .i_about_svg svg { transform: rotateZ(0deg);}

#c-about .c-wrap { position: sticky; top: 0; height: 100vh; padding: 0.8rem 13.55%; transition: 0.5s;overflow: hidden;}

#c-about .c-wrap .c-box { position: relative; width: 100%; height: 100%;overflow: hidden;}

#c-about .c-wrap .c-box::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2);}

#c-about .c-wrap .c-box img { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; object-fit: cover;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width:none;}

#c-about .c-wrap .c-box img:nth-child(2) {display: none;}

#c-about .c-wrap .c-box .i_about_svg svg { position: absolute;bottom: 0; left: 50%; z-index: 2; margin-left: -42vw;width: 84vw;transform-origin: bottom center; transform: rotateZ(-180deg);

 transition: all 0.5s 0.5s linear;}

#c-about .c-wrap .c-box .c-text-box {position: absolute; top: 50%; left: 0; z-index: 5; width: 100%; -webkit-transform: translateY(-50%);transform: translateY(-50%);}

#c-about .c-wrap .c-box .c-text-box .c-text { margin: 0 auto; width:96%; max-width: 850px; margin-bottom: 0.5rem; line-height: 1.3; text-align: center;color: #fff; font-weight:bold;}

#c-about .i_more{ margin:0 auto; margin-top:8%;}

/*大事记*/

.i_four{ overflow:hidden;}

.i_four .i_title{ text-align:left;}

.i_four .i_more{ float:right; margin-top:-52px; position:relative;}

.i_news{ margin-top:47px; border-top:1px solid #e8e8e8;}

.f_one{ display:block;}

@media screen and (max-width: 1800px) {

/*轮显*/

.banner_page{ margin-left:-48%;}

.banner_tit{margin-left:-48%;}

}



@media screen and (max-width: 1400px) {

/*轮显*/

.main .banner .down{ bottom:35px;}

.main .banner .btn{ bottom:75px;}

.banner_tit{ bottom:125px;}





}

@media screen and (max-width: 1360px) {

/*产品中心*/

.i_one .i_one_ul li .boxs2{ height:390px;}



}

@media screen and (max-width: 1300px) {

/*轮显*/

.main .banner .btn{ bottom:70px;}

.banner_tit{ bottom:120px; font-size:17px;}

}

@media screen and (max-width: 1200px) {

/*产品中心*/

.i_title .p{ font-size:15px;}

/*四大基地*/

.i_two .wrap{ margin-bottom:228px;}

.i_two_ul{ margin-top:-177px;}

.i_two_ul li .boxs{ padding:20px;}

.i_two_ul li .imgs{ width:190px; padding-top: 133px; margin-right:2%;}

.i_two_ul li .h3{ height:32px; line-height:32px;}

.i_two_ul li .p{ font-size:15px; line-height:26px; height:52px; margin-top:12px;}



}



@media screen and (max-width: 1024px) {

/*服务网络*/

.i_three_r{ float:none; width:100%;}

.i_three_r .i_three_map{ display:none;}

.i_three_r .maps#maps2{ display:block;}

.i_three_r .maps#maps1{ display:none;}

.i_three_l{ position:static; display:block; width:100%; margin-bottom:5%;}

.i_three_l .i_title{ text-align:center;}

.i_three_l .i_title .p{ max-width:none;}

.i_three_l .i_more{ margin:0 auto; margin-top:8%;}

}



@media (max-width: 972px) {

/*目标*/

 /* #c-about .c-main-wrap {

    height: 150vh;

  }*/

  #c-about .c-wrap {

    padding: 1.5rem 1rem;

  }

  

}



@media screen and (max-width: 960px) {

/*轮显*/

.banner_page .current{ font-size:26px;}

.main .banner .btn{ bottom:60px;}

.main .banner .btn .boxs{ width:72px;}

.main .banner .down{ height:40px; width:25px;}

.main .banner .down span{ height:40px;}

.main .banner .swiper-button-prev, .main .banner .swiper-button-next, .main .banner .swiper_button_play{ width:32px; height:32px;}



.banner_page{ line-height:32px; width:92px;  font-size:13px;}

.banner_tit{ bottom:118px; font-size:16px;}

/*产品中心*/

.i_title .p{ font-size:14px;}

.i_one .i_one_ul li .boxs2{ height:330px;}

.i_one .i_one_ul li .boxs2 .h3{ height:32px; line-height:32px; margin-top:30px;}

.i_one .i_one_ul li .boxs2 .imgs{ margin-top:15px;}

.i_one .i_one_ul li .boxs2 .i_more{ margin-top:70px;}

.i_more{ width:170px;}

/*四大基地*/

.i_two_ul li .boxs{ padding:12px;}

.i_two_ul li .imgs{ width:160px; padding-top: 112px;}

.i_two_ul li .p{ font-size:14px; line-height:24px; height:48px; margin-top:8px;}

.i_two_ul li .h3{ margin-top:10px;}



}



@media screen and (max-width: 780px) {

/*产品中心*/

.i_title .p{ font-size:13px;}

.i_one .i_one_ul li{ float:none; width:100%; margin-bottom:3%;}

.i_one .i_one_ul li:nth-child(2n+0){ float:none;}

.i_one .i_one_ul li .boxs2{ height:auto; margin-bottom:3%;}

.i_one .i_one_ul li .boxs2 .txts{ position:static; width:100%; max-width:none;}

.i_one .i_one_ul li .boxs2 .imgs{ float:none; width:100%; padding-top:0;}

.i_one .i_one_ul li .boxs2 .imgs img{ position:static; height:auto;}

.i_one .i_one_ul li .boxs2 .h3{ margin-top:25px;}

.i_one .i_one_ul li .boxs2 .i_more{ margin-top:56px;}

/*四大基地*/

.i_two .wrap{ margin-bottom:170px;}

.i_two_ul{ margin-top:-123px;}

.i_two_ul li .imgs{ width:140px; padding-top:98px;}

.i_two_ul li .p{ font-size:13px; line-height:22px; height:44px;}

.i_two_ul li .h3{ height:26px; line-height:26px; margin-top:5px;}

}

@media (max-width: 748px) {

/*目标*/

  #c-about .c-main-wrap {

    margin-top: 0.5rem;

    height: 45vh;

  }

  #c-about .c-wrap {

    height: 45vh;

  }

    #c-about .c-wrap .c-box img {

    display: none;

  }

  #c-about .c-wrap .c-box img:nth-child(2) {

    display: block;

  }

}

@media screen and (max-width: 640px) {

/*轮显*/

.main .banner .down{ height:30px; width:19px;bottom:20px;}

.main .banner .down span{ height:30px;}

.main .banner .btn{bottom:55px;}

.banner_page{ bottom:17px;}

.banner_tit{ bottom:100px; font-size:15px;}

/*产品中心*/

.i_title .p{ font-size:12px;}

.i_one .i_one_ul li .boxs2 .label{ font-size:14px;}

.i_one .i_one_ul li .boxs2{ padding-top:40px;}

.i_one .i_one_ul li .boxs2 .p{ font-size:14px;}

.i_more{ width:150px; height:38px; line-height:38px;}

/*四大基地*/

.i_two .wrap{ margin-bottom:140px;}

.i_two_ul{ margin-top:-108px;}

.i_two_ul li .imgs{ width:120px; padding-top:84px;}

.i_two_ul li .p{ font-size:12px; line-height:20px; height:40px;}

.i_two_ul li .h3{ height:24px; line-height:24px;}

/*服务网络*/

.i_three_l .i_more{ margin-top:6%;}

/*大事记*/

.i_news{ margin-top:30px;}

}



@media screen and (max-width: 480px) {

/*轮显*/

.main .banner .down{bottom:18px; display:none;}

.main .banner .btn{bottom:52px;}

.banner_page{ bottom:12px;}

.banner_tit{ bottom:70px; font-size:14px; line-height:26px;}

/*产品中心*/

.i_one .i_one_ul li .boxs2{ padding-top:8%;}

.i_one .i_one_ul li .boxs2 .label{ font-size:13px;}

.i_one .i_one_ul li .boxs2{ padding-bottom:8%;}

.i_one .i_one_ul li .boxs2 .i_more{ margin-top:8%;}

.i_one .i_one_ul li .boxs2 .h4{ line-height:22px; height:22px;}

.i_one .i_one_ul li .boxs2 .p{ font-size:13px;}

/*四大基地*/

.i_two_ul li{ float:none; width:100%;}

.i_two_ul li:nth-child(3){ background:#fff;}

.i_two_ul li:nth-child(4){ background:#f0f0f0;}

/*大事记*/

.i_news{ margin-top:20px;}

.i_four .i_more{ margin-top:-40px;}



}





@media screen and (max-width: 420px) {



}

@media screen and (max-width: 360px) {



}

@keyframes mymove6

{

	from {filter:alpha(opacity=0);opacity:0;  -webkit-transform: translateY(-100px) translateX(0);

  -moz-transform: translateY(-100px) translateX(0);

  transform: translateY(-100px) translateX(0);

  -webkit-transition-timing-function: ease-in-out;

  transition-timing-function: ease-in-out;}

	to { filter:alpha(opacity=100);opacity:1; -webkit-transform: translateY(0px) translateX(0);

  -moz-transform: translateY(0px) translateX(0);

  transform: translateY(0px) translateX(0);}

}



@-webkit-keyframes mymove6

{

	/*from { filter:alpha(opacity=0);opacity:0; margin-bottom:-20%;}

	to {margin-bottom:3%;filter:alpha(opacity=1);opacity:1;}*/

	from {filter:alpha(opacity=0);opacity:0;  -webkit-transform: translateY(-100px) translateX(0);

  -moz-transform: translateY(-100px) translateX(0);

  transform: translateY(-100px) translateX(0);

  -webkit-transition-timing-function: ease-in-out;

  transition-timing-function: ease-in-out;}

	to { filter:alpha(opacity=100);opacity:1; -webkit-transform: translateY(0px) translateX(0);

  -moz-transform: translateY(0px) translateX(0);

  transform: translateY(0px) translateX(0);}

}

@keyframes animate1 {

  0% {

    transform: translate(-50%, 0%);

  }

  50% {

    transform: translate(-50%, 50%);

  }

  100% {

    transform: translate(-50%, 0%);

  }

}

/*圆圈*/

.cycle-box ,

.cycle-box * {

        box-sizing: border-box;

}

.cycle-box .cycle-son::before{box-sizing: border-box;}

.cycle-box .cycle-son::after{box-sizing: border-box;}



.cycle-box {

  --size: 40px;

  --time: 4s;

  width: var(--size);

  height: var(--size);

}

.cycle-box .cycle-son {

  position: absolute;

  top: 0;

  height: var(--size);

  width: calc(var(--size)*0.5);

  overflow: hidden;

}

.cycle-box .cycle-son::before {

  content: '';

  display: block;

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

 

}

.cycle-box .left-c {

  left: 0;

}

.cycle-box .left-c::before {

  transform-origin: right center;

  border-radius: calc(var(--size)*0.5) 0 0 calc(var(--size)*0.5);

  border: 1px solid #ffffff;

  border-right: 0;

  transform: rotate(-180deg);

}

.cycle-box .right-c {

  right: 0;

}

.cycle-box .right-c::before {

  transform-origin: left center;

  border-radius: 0 calc(var(--size)*0.5) calc(var(--size)*0.5) 0;

  border: 1px solid #ffffff;

  border-left: 0;

  transform: rotate(-180deg);

}

.cycle-box.run .left-c::before {

  animation: cycle-left var(--time) linear;

}

.cycle-box.run .right-c {

  right: 0;

}

.cycle-box.run .right-c::before {

  animation: cycle-right var(--time) linear;

}

@keyframes cycle-left {

  0% {

    transform: rotate(-180deg);

  }

  50% {

    transform: rotate(-180deg);

  }

  100% {

    transform: rotate(0deg);

  }

}

@keyframes cycle-right {

  0% {

    transform: rotate(-180deg);

  }

  50% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(0deg);

  }

}



.btn .swiper-btn .cycle-box {

  position: absolute;

  left: -1px;

  top: -1px;

}

@media (max-width: 1200px) {

  .btn .swiper-btn {

    width: 0.6rem;

    height: 0.6rem;

  }

  .btn .swiper-btn .cycle-box {

    --size: 0.6rem;

  }

}



@media (max-width: 960px) {

.cycle-box {

  --size: 32px;

}

}